<template>
    <div>
      <div class="menus">
        <ul>
            <li
                v-for="(item, i) in list"
                :key="i"
                @click="pageName = item.path"
                :class="pageName==item.path?'active':''"
            >
                {{ i+1 }}. {{ item.name }}
            </li>
        </ul>
      </div>
        <!-- 测试hash值 -->
        <!-- <DefaultPage></DefaultPage> -->
        <component :is="pageName"></component>
    </div>
</template>

<script>
import DefaultPage from "@/view/DefaultPage";
import CarefulPage from "@/view/CarefulPage";
import ComponentSyle from '@/view/ComponentStyle/ComponentSyle';
import AjaxPage from '@/view/AjaxPage';
import AjaxUtil from '@/view/AjaxUtil';
import AjaxCorse from '@/view/AjaxCorse';
import PluginPage from '@/view/PluginPage';
import RouterInstall from '@/view/RouterInstall'


export default {
    components: {
        DefaultPage,
        CarefulPage,
        ComponentSyle,
        AjaxPage,
        AjaxUtil,
        AjaxCorse,
        PluginPage,
        RouterInstall
    },
    data() {
        return {
            list: [
                { name: "默认页面", path: "DefaultPage" },
                { name: "注意事项", path: "CarefulPage" },
                { name: "单文件组件样式", path: "ComponentSyle" },
                { name: "数据交互", path: "AjaxPage" },
                { name: "工具模块化", path: "AjaxUtil" },
                { name: "跨域代理", path: "AjaxCorse" },
                { name: "插件开发", path: "PluginPage" },
                { name: "路由的安装", path: "RouterInstall" }
            ],
            pageName: "AjaxCorse",
        };
    },
};
</script>
<style scoped>
.menus {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    /* height: 70px; */
    overflow-x: auto;
    color: white;
    white-space: nowrap;
    background-color: #303643;
}
.menus ul{
    margin: 0px;
    list-style: none;
}
.menus li {
    display: inline-block;
    line-height: 50px;
    padding: 0px 20px;
    cursor: pointer;
}
.menus li.active {
    font-weight: bolder;
    color: tomato;
}
</style>
<style>
body {
    padding-top: 70px;
    margin-bottom: 800px;
}
pre {
    font-size: 18px;
    white-space: pre-wrap;
}
pre > img {
    width: 600px;
    height: 200px;
    object-fit: contain;
    object-position: left;
}
pre > code{
    font-size: 14px;
}
</style>
